import React from 'react';
import { Link } from 'react-router-dom';
import cn from 'classnames';
import s from './style.module.css';
import { gql, useQuery } from '@apollo/client';
import Breadcrumb, { Item } from '../../../components/Breadcrumb';
import Label from '../../../components/Label';
import Dialog from '@kuiper-components/dialog';
import Button from '@kuiper-components/button';
import CopyBoard from '../../../components/CopyBoard';
import fetch from 'API/fetch';

const whitelistGQL = gql`
	query {
		whitelist
			@rest(
				type: "YunaqWhitelistResponse"
				path: "/cloud/idw_get_assets"
				endpoint: "v2"
			) {
			code
			msg
			results {
				count
			}
		}
	}
`;
const blacklistGQL = gql`
	query {
		url
			@rest(
				type: "YunaqBlacklistResponse"
				path: "/cloud/udb_get_blacklist"
				endpoint: "v2"
			) {
			code
			msg
			results {
				count
			}
		}

		strategy
			@rest(
				type: "YunaqBlacklistResponse"
				path: "/cloud/udb_get_blacklist_set"
				endpoint: "v2"
			) {
			code
			msg
			results {
				count
			}
		}
	}
`;

function FuncSet() {
	const [showTable, setShowTable] = React.useState(false);
	const [rootData, setRootData] = React.useState(Array(12).fill(0));
	const { data: whitelist } = useQuery(whitelistGQL, {
		fetchPolicy: 'cache-and-network',
	});
	const { data: blacklist } = useQuery(blacklistGQL, {
		fetchPolicy: 'cache-and-network',
	});

	let urlCount = blacklist?.url?.results?.count;
	urlCount = urlCount === undefined ? '- -' : urlCount;
	let strategyCount = blacklist?.strategy?.results?.count;
	strategyCount = strategyCount === undefined ? '- -' : strategyCount;
	let whitelistCount = whitelist?.whitelist?.results?.count;
	whitelistCount = whitelistCount === undefined ? '- -' : whitelistCount;
	const getRlist = () => {
		fetch('api/v2/cloud/task/get', {
			method: 'GET',
		}).then(res => {
			console.log('[ res ]-79', res);
			if (res.code === 200) {
				setRootData(res.results);
			}
		});
	};
	React.useMemo(() => {
		getRlist();
	}, []);
	return (
		<div className={s.content}>
			<Breadcrumb className={s.breadcrumb}>
				<Item active key="yfld">
					云防联动
				</Item>
			</Breadcrumb>
			<div className={cn('scanv-page-container', s.settingsList)}>
				<Label
					note="以下功能与知道创宇云防御平台防护功能实时联动，被监测资产需同时接入ScanV
						及云防御平台功能才生效。"
				>
					功能设置
				</Label>
				<table className={s.table}>
					<tbody>
						<tr>
							<td className={s.iconCol}>
								<svg
									className={s.icon}
									width="56px"
									height="56px"
									viewBox="0 0 56 56"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									xlink="http://www.w3.org/1999/xlink"
								>
									<g
										id="加黑加白"
										stroke="none"
										strokeWidth="1"
										fill="none"
										fillRule="evenodd"
									>
										<g
											id="功能设置"
											transform="translate(-295.000000, -209.000000)"
										>
											<g
												id="编组-9"
												transform="translate(296.000000, 210.000000)"
											>
												<circle
													id="Oval"
													stroke="#ABCDF1"
													fill="#FFFFFF"
													cx="27"
													cy="27"
													r="27"
												></circle>
												<g
													id="编组-8"
													transform="translate(11.000000, 11.000000)"
												>
													<path
														d="M22.0019369,10.7105465 C20.5360007,9.0484329 18.3904377,8 16,8 C11.581722,8 8,11.581722 8,16 C8,20.418278 11.581722,24 16,24 C20.418278,24 24,20.418278 24,16"
														id="路径"
														stroke="#0B6FD6"
														strokeWidth="1.5"
														fill="#FFFFFF"
													></path>
													<path
														d="M27.6587864,5.04216133 C24.7404219,1.93831085 20.5965693,0 16,0 C7.163444,0 0,7.163444 0,16 C0,24.836556 7.163444,32 16,32 C24.836556,32 32,24.836556 32,16"
														id="路径"
														stroke="#0B6FD6"
														strokeWidth="1.5"
													></path>
													<rect
														id="矩形"
														stroke="#0B6FD6"
														transform="translate(25.767767, 7.482233) rotate(-45.000000) translate(-25.767767, -7.482233) "
														x="18.267767"
														y="7.23223305"
														width="15"
														height="1"
													></rect>
													<text
														id="IP"
														fontFamily="PingFangSC-Regular, PingFang SC"
														fontSize="10"
														fontWeight="normal"
														fill="#0B6FD6"
													>
														<tspan x="12" y="20">
															IP
														</tspan>
													</text>
												</g>
											</g>
										</g>
									</g>
								</svg>
							</td>
							<td className={s.descriptionCol}>
								<p className={s.title}>扫描器IP加白</p>
								<p className={s.note}>
									联动知道创宇云防御平台加白ScanV
									扫描器IP，开启扫描访问权限，保障监测服务正常运行。
								</p>
							</td>
							<td className={s.actionNameCol}>
								已设置资产数：
								<span className={s.field}>{whitelistCount}个</span>
							</td>
							<td className={s.actionCol}>
								<Link
									to="/yfld/whitelist"
									className={cn(s.field, s.gotoSetting)}
								>
									设置
								</Link>
							</td>
						</tr>
						<tr>
							<td className={s.iconCol}>
								<svg
									className={s.icon}
									width="56"
									height="56"
									viewBox="0 0 56 56"
									fill="none"
									xmlns="http://www.w3.org/2000/svg"
								>
									<circle
										cx="28"
										cy="28"
										r="27"
										fill="white"
										stroke="#ABCDF1"
									/>
									<rect
										x="12.75"
										y="16.55"
										width="30.9"
										height="22.5"
										rx="1.41"
										stroke="#0B6FD6"
										strokeWidth="1.5"
										fill="none"
									/>
									<rect
										x="20.475"
										y="42.635"
										width="15.45"
										height="0.75"
										stroke="#0B6FD6"
										strokeWidth="0.75"
									/>
									<circle
										cx="27.12"
										cy="23.48"
										r="3.57"
										stroke="#0B6FD6"
										strokeWidth="1.5"
										fill="none"
									/>
									<circle
										cx="33.6"
										cy="32.12"
										r="3.57"
										stroke="#0B6FD6"
										strokeWidth="1.5"
										fill="none"
									/>
									<path
										d="M29.8967 28.4234C29.0551 28.0237 28.1137 27.8 27.12 27.8C23.5412 27.8 20.64 30.7012 20.64 34.28"
										stroke="#0B6FD6"
										strokeWidth="1.5"
										strokeLinecap="round"
										fill="none"
									/>
									<rect
										x="36.3064"
										y="29.2709"
										width="0.75"
										height="7.35"
										transform="rotate(45 36.3064 29.2709)"
										fill="white"
										stroke="#0B6FD6"
										strokeWidth="0.75"
									/>
								</svg>
							</td>
							<td className={s.descriptionCol}>
								<p className={s.title}>风险应急响应</p>
								<p className={s.note}>
									在高危漏洞、安全事件爆发时，ScanV
									联动知道创宇云防御平台，一键加黑风险地址，及时缓解业务系统威胁。
								</p>
							</td>
							<td className={s.actionNameCol}>
								<div>
									策略设置：<span className={s.field}>{strategyCount}条</span>
								</div>
								<span>
									生效URL数：<span className={s.field}>{urlCount}条</span>
								</span>
							</td>
							<td className={s.actionCol}>
								<div>
									<Link
										to="/yfld/blacklist/strategy"
										className={cn(s.field, s.gotoSetting)}
									>
										设置
									</Link>
								</div>
								<div>
									<Link
										to="/yfld/blacklist/url"
										className={cn(s.field, s.gotoSetting)}
									>
										设置
									</Link>
								</div>
							</td>
						</tr>
						<tr>
							<td className={s.iconCol}>
								<svg
									className={s.icon}
									width="56px"
									height="56px"
									viewBox="0 0 56 56"
									version="1.1"
									xmlns="http://www.w3.org/2000/svg"
									xmlnsXlink="http://www.w3.org/1999/xlink"
								>
									<g
										id="页面-1"
										stroke="none"
										strokeWidth="1"
										fill="none"
										fillRule="evenodd"
									>
										<g id="源站安全检测">
											<circle
												id="Oval"
												stroke="#ABCDF1"
												strokeWidth="1.5"
												cx="28"
												cy="28"
												r="27.25"
											></circle>
											<g
												id="药品检测"
												transform="translate(14.933333, 11.200000)"
												fill="#0B6FD6"
												fillRule="nonzero"
											>
												<path
													d="M20.5333333,11.1307649 C20.5333333,10.902811 20.4489491,10.6842429 20.298829,10.5233746 C20.1487089,10.3625064 19.9452176,10.2725862 19.7333366,10.2734908 L6.49702704,10.2734908 C6.19072991,10.231725 5.8895736,10.3840796 5.72410297,10.6645123 C5.55863234,10.9449449 5.55863234,11.3029773 5.72410297,11.58341 C5.8895736,11.8638426 6.19072991,12.0161973 6.49702704,11.9744314 L19.7333366,11.9744314 C20.169754,11.9763537 20.5264097,11.6002291 20.5333333,11.1307649 L20.5333333,11.1307649 Z M12.3215092,15.9478287 L6.49702704,15.9478287 C6.19072991,15.9060629 5.8895736,16.0584176 5.72410297,16.3388502 C5.55863234,16.6192829 5.55863234,16.9773152 5.72410297,17.2577479 C5.8895736,17.5381806 6.19072991,17.6905352 6.49702704,17.6487694 L12.3215092,17.6487694 C12.6278063,17.6905352 12.9289626,17.5381806 13.0944332,17.2577479 C13.2599039,16.9773152 13.2599039,16.6192829 13.0944332,16.3388502 C12.9289626,16.0584176 12.6278063,15.9060629 12.3215092,15.9478287 L12.3215092,15.9478287 Z M12.3215092,21.6255686 L6.49702704,21.6255686 C6.19072991,21.5838027 5.8895736,21.7361574 5.72410297,22.01659 C5.55863234,22.2970227 5.55863234,22.6550551 5.72410297,22.9354877 C5.8895736,23.2159204 6.19072991,23.368275 6.49702704,23.3265092 L12.3215092,23.3265092 C12.6278063,23.368275 12.9289626,23.2159204 13.0944332,22.9354877 C13.2599039,22.6550551 13.2599039,22.2970227 13.0944332,22.01659 C12.9289626,21.7361574 12.6278063,21.5838027 12.3215092,21.6255686 L12.3215092,21.6255686 Z"
													id="形状"
												></path>
												<path
													d="M21.1428855,29.1068063 L1.63211655,29.1068063 L1.63211655,3.72905759 L5.71727506,3.72905759 L5.71727506,4.145637 C5.71906064,5.12638045 6.48651012,5.92096978 7.43375548,5.9228185 L18.7093121,5.9228185 C19.6565575,5.92096978 20.424007,5.12638045 20.4257926,4.145637 L20.4257926,3.72905759 L24.5109511,3.72905759 L24.5109511,14.7012216 C24.5627351,15.1242423 24.9103016,15.4413692 25.3221422,15.4413692 C25.7339828,15.4413692 26.0815493,15.1242423 26.1333333,14.7012216 L26.1333333,3.30575916 C26.1333333,2.60441536 25.5842012,2.03586387 24.9068123,2.03586387 L20.4257926,2.03586387 L20.4257926,1.7771815 C20.424007,0.796438046 19.6565575,0.0018487202 18.7093121,0 L7.43700025,0 C6.48975488,0.0018487202 5.7223054,0.796438046 5.72051982,1.7771815 L5.72051982,2.03586387 L1.22327622,2.03586387 C0.547154889,2.03771582 0,2.60572524 0,3.30575916 L0,29.5301047 C0,29.8669019 0.129222375,30.1899047 0.359239679,30.4280563 C0.589256982,30.6662078 0.901227393,30.8 1.22652098,30.8 L21.1428855,30.8 C21.5514576,30.7463847 21.8577527,30.386527 21.8577527,29.9601222 C21.8577527,29.5337173 21.5514576,29.1738596 21.1428855,29.1202443 L21.1428855,29.1068063 Z M7.35263637,1.7771815 C7.35263637,1.72894092 7.39040737,1.68983421 7.43700025,1.68983421 L18.7093121,1.68983421 C18.755905,1.68983421 18.793676,1.72894092 18.793676,1.7771815 L18.793676,4.12883944 C18.793676,4.17708002 18.755905,4.21618674 18.7093121,4.21618674 L7.43700025,4.21618674 C7.39040737,4.21618674 7.35263637,4.17708002 7.35263637,4.12883944 L7.35263637,1.7771815 Z"
													id="形状"
												></path>
												<path
													d="M29.6638715,28.4435703 L26.3482156,24.7553562 C27.8050721,22.697167 27.7348035,19.8593375 26.1780598,17.8835423 C24.6213161,15.9077472 21.9812182,15.305621 19.7850536,16.4254917 C17.588889,17.5453624 16.4053573,20.0972381 16.9191275,22.6048674 C17.4328977,25.1124967 19.5109285,26.926526 21.951086,26.9975454 L22.1065074,26.9975454 C23.2108672,26.9978621 24.2872206,26.6323624 25.1825554,25.953005 L28.4787836,29.6208047 C28.7918708,29.9441027 29.2922601,29.9491918 29.6112437,29.6323221 C29.9302273,29.3154524 29.9534815,28.79019 29.6638715,28.4435703 L29.6638715,28.4435703 Z M21.9996552,25.2963396 C19.9735479,25.266274 18.3542581,23.515989 18.3828704,21.3869687 C18.4114827,19.2579484 20.0771621,17.5564094 22.1032695,17.586475 L22.2101217,17.586475 C23.6905432,17.6309299 25.0003268,18.6063953 25.5306553,20.0594527 C26.0609839,21.5125102 25.707828,23.1581276 24.6353426,24.2313848 C23.9250617,24.9381343 22.9775725,25.3209692 21.9996552,25.2963396 L21.9996552,25.2963396 Z"
													id="形状"
												></path>
											</g>
										</g>
									</g>
								</svg>
							</td>
							<td className={s.descriptionCol}>
								<p className={s.title}>源站安全检测</p>
								<p className={s.note}>
									ScanV为您已接入云防御平台的源站提供脆弱性、安全事件等监测，针对性加固安全防护。
								</p>
							</td>
							<td className={s.actionNameCol}>
								<div>已检测站点数：<span className={s.field}>{rootData.length}条</span></div>
							</td>
							<td className={s.actionCol}>
								<div>
									<span
										className={cn(s.field, s.gotoSetting)}
										onClick={() => {
											setShowTable(true);
										}}
									>
										查看
									</span>
								</div>
							</td>
						</tr>
					</tbody>
				</table>
			</div>
			<Dialog
				title="详情"
				className={s.deldia}
				visible={showTable}
				onClose={() => {
					setShowTable(false);
				}}
				destroyOnClose={true}
			>
				<div className={s.cont}>
					<div className={s.dialogTitle}>
						历史已检测站点数：{rootData.length}个
					</div>
					<div className={s.tableBox}>
						<table className={s.table}>
							<thead>
								<tr className={s.head}>
									<td className={s.td1}>资产名称</td>
									<td>资产地址</td>
									<td>源站IP</td>
								</tr>
							</thead>
							<tbody className={s.tbody}>
								{rootData.map((e, i) => {
									return (
										<tr className={s.row} key={i}>
											<td className={s.td1}>
												<CopyBoard
													text={e.target_name}
													maxWidth="7rem"
													className={s.tdc1}
												/>
											</td>
											<td className={s.td2}>
												<CopyBoard
													text={e.target_url}
													maxWidth="17rem"
													className={s.tdc2}
												/>
											</td>
											<td className={s.td3}>{e.source_ip}</td>
										</tr>
									);
								})}
							</tbody>
						</table>
					</div>
					<div className={s.footer}>
						<Button
							primary
							className={s.dels}
							onClick={() => {
								setShowTable(false);
							}}
						>
							确定
						</Button>
					</div>
				</div>
			</Dialog>
		</div>
	);
}
export default FuncSet;
